<template>
	<public-view navColor="#ffffff" topBgShow="3" navType="shop" navTitle="商城">
		<view class="content">
			<my-swiper :list="swiper_list" bottom="-20rpx" activeType="2"></my-swiper>
			<view class="tab-list-box flex a-i-c j-c-b marign-t54 f-w-w">
				<!-- @click="goTo({url:'/pages/shop/accessory?class_id='+item.id})" -->
				<block v-for="(item, index) in class_list" :key="index">
					<view class="item flex f-d-c a-i-c f-s-24 l-h-34" @click="goTo({url:`/pages/shop/goodsLIst?class_id=${item.id}&top_class_id=${item.pid}`})">
						<image class="icon" :src="item.image" mode=""></image>
						{{item.name||""}} 
					</view>
				</block>
			</view>
			<view class="tab-list-box flex a-i-c j-c-b f-w-w" style="padding-left: 38rpx;padding-right: 36rpx;">
				<block v-for="(item, index) in class_list2" :key="index">
					<view class="item flex f-d-c a-i-c f-s-24 l-h-34" @click="goTo({url:`/pages/shop/accessory?class_id=${item.id}&pid=${item.pid}`})">
						<image class="icon" :src="item.image" mode=""></image>
						{{item.name||""}} 
					</view>
				</block>
				<!-- <view class="item flex f-d-c a-i-c f-s-24 l-h-34">
					<image class="icon" src="@/static/other/tejia.svg" mode=""></image>
					降价特卖 
				</view>
				<view class="item flex f-d-c a-i-c f-s-24 l-h-34 " @click="goTo({url:'/pages/shop/accessory'})">
					<image class="icon" src="@/static/other/quanbu.svg" mode=""></image>
					全部配件 
				</view>
				<view class="item flex f-d-c a-i-c f-s-24 l-h-34">
					<image class="icon" src="@/static/other/renqi.svg" mode=""></image>
					人气特卖 
				</view>
				<view class="item flex f-d-c a-i-c f-s-24 l-h-34">
					<image class="icon" src="@/static/other/youhui.svg" mode=""></image>
					优惠好物 
				</view> -->
			</view>
			<view class="machine-box">
				<view class="title-box flex a-i-c j-c-b" @click="goTo({url:'/pages/shop/accessory'})">
					<view class="title f-s-32 f-w-b">
						配件推荐
					</view>
					<view class="all-box flex a-i-c color-525252 f-s-24">
						全部
						<image class="icon" src="@/static/images/all-shop-next-icon.svg" mode=""></image>
					</view>
				</view>
				<view class="machine-item-list flex f-w-w j-c-b">
					<block v-for="(item,index) in class_list3" :key="index">
						<view class="item">
							<view class="top flex w-100 a-i-c">
								<image class="icon" :src="item.image" mode=""></image>
								<view class="title-box1 flex f-d-c">
									<view class="title1 f-s-26 l-h-36">
										{{item.name||""}}
									</view>
									<view class="f-s-26 color-F32E2E l-h-36">
										¥{{item.price||0}}
									</view>
								</view>
							</view>
							<view class="bottom flex a-i-c j-c-b">
								<view class="left f-s-28">
									热门配件No.{{index+1}}
								</view>
								<!-- @click="goToUrl(item)" -->
								<view class="gogoods all-center f-s-22 color-fff l-h-30" @click="goToUrl(item)">
									{{item.btn_text||""}}
								</view>
							</view>
						</view>
					</block>
					<!-- <view class="item">
						<view class="top flex w-100 a-i-c">
							<image class="icon" src="@/static/other/peijian.svg" mode=""></image>
							<view class="title-box1 flex f-d-c">
								<view class="title1 f-s-26 l-h-36">
									配件商品名称
								</view>
								<view class="f-s-26 color-F32E2E l-h-36">
									¥188.0
								</view>
							</view>
						</view>
						<view class="bottom flex a-i-c j-c-b">
							<view class="left f-s-28">
								热门配件No.1
							</view>
							<view class="gogoods all-center f-s-22 color-fff l-h-30">
								去逛逛
							</view>
						</view>
					</view> -->
				</view>
			</view>
			<scroll-view :scroll-x="true" style="width: 750rpx;height: 100rpx;">
				<view class="tuijian-box a-i-c">
					<block v-for="(item, index) in tab_list" :key="index">
						<view @click="changeTab(item)" class="item flex f-d-c a-i-c" :class="tab_id === item.id?'active':'unactive'">
							{{item.name}}
							<view class="bottoml" v-if="tab_id === item.id"></view>
						</view>
					</block>
				</view>
			</scroll-view>
			<view class="goods-list-box flex f-w-w j-c-b w-100">
				<block v-for="(item, index) in top_goods_list" :key="index">
					<goods-item :item="item"></goods-item>
				</block>
			</view>
		</view>
	</public-view>
</template>

<script>
	import mySwiper from "@/components/myComponents/swiper.vue"
	import goodsItem from "./components/goodItem.vue"
	import {goTo} from "@/nav.js"
	import {getStorClassList,getGoodsList} from "@/utils/pagePublic.js"
	export default {
		components:{
			"my-swiper":mySwiper,
			"goods-item":goodsItem
		},
		data() {
			return {
				swiper_list:[],
				tab_list:[],
				tab_id:1,
				class_list:[],
				class_list2:[],
				top_goods_list:[],
				class_list3:[],
			};
		},
		onLoad() {
			
		},
		onShow() {
			getStorClassList(0,0,(res)=>{
				console.log(res,"fffffff")
				this.tab_list = res.data
				this.tab_id = this.tab_list[0].id
				this.getGoodsListMethods()
			})
			this.getClassList()
			this.getSwiperList()
		},
		onPullDownRefresh() {
			this.top_goods_list = []
			this.getGoodsListMethods()
		},
		methods:{
			goTo,
			getGoodsListMethods(){
				getGoodsList({
					merchant_id:0,
					class_id:-1,
					top_class_id:this.tab_id,
					keyword:""
				},res=>{
					console.log(res)
					this.top_goods_list = res.data.data
					uni.stopPullDownRefresh()
				})
			},
			goToUrl(item){
				console.log(item)
				let str = JSON.stringify(item)
				this.$store.commit("changeGoodsInfo",str)
				this.goTo({url:'/pages/shop/goodsInfo'})
			},
			getClassList(){
				let that = this
				that.util.postRequest({
					url:"v1/merchant/getPartsIndex",
				}).then(res=>{
					console.log(res)
					// that.swiper_list = res.data.banner
					that.class_list = res.data.brand
					that.class_list2 = res.data.class
					that.class_list3 = res.data.goods
				})
			},
			getSwiperList(){
				let that = this
				that.util.getRequest({
					url:"v1/public_/getBanner",
					data:{
						type:1
					}
				}).then(res=>{
					console.log(res)
					that.swiper_list = res.data
				})
			},
			changeTab(item){
				this.tab_id = item.id
				this.top_goods_list = []
				this.getGoodsListMethods()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.goods-list-box{
		width: 100%;
		padding: 0 24upx;
		
	}
	.tuijian-box{
		width: 100%;
		padding: 0 58upx;
		margin-top: 30upx;
		margin-bottom: 38upx;
		display: -webkit-inline-box;
		.item{
			position: relative;
			margin-right: 38upx;
			font-size: 30rpx;
			line-height: 42upx;
			transition: all .2s ease-out;
		}
		.active{
			font-weight: bold;
		}
		.unactive{
			color: #666666;
		}
		.bottoml{
			width: 38upx;
			height: 8upx;
			position: absolute;
			bottom: -10upx;
			background: #EE8300;
		}
	}
	.machine-box{
		width: 702upx;
		padding: 34upx;
		background: linear-gradient(180deg, #FCECEC 0%, #FFFFFF 59.05%);
		border-radius: 24upx;
		.machine-item-list{
			width: 100%;
			.item{
				width: 310upx;
				padding: 22upx 8upx;
				background: #FFFFFF;
				border: 2upx solid #FCECE7;
				border-radius: 8upx;
				.bottom{
					padding: 16upx 0 0;
					.gogoods{
						width: 96upx;
						height: 40upx;
						background: #FF6C4D;
						border-radius: 46upx;
					}
					.left{
						color: #FF936A;
					}
				}
				.top{
					padding-bottom: 22rpx;
					border-bottom: 2rpx dashed #fcece7;
					.icon{
						width: 98upx;
						height: 98upx;
						margin-right: 18upx;
						border-radius: 20rpx;
					}
					.title-box1{
						.title1{
							margin-bottom: 18upx;
						}
					}
				}
			}
		}
		.title-box{
			width: 100%;
			margin-bottom: 20upx;
			.all-box{
				.icon{
					width: 20rpx;
					height: 20rpx;
					margin-left: 8upx;
				}
			}
			.title{
				color: #131D34;
			}
		}
	}
	.tab-list-box{
		width: 702upx;
		padding: 32upx 24upx;
		background: #FFFFFF;
		border-radius: 24upx;
		margin-bottom: 24upx;
		.item{
			.icon{
				width: 64upx;
				height: 64upx;
				margin-bottom: 12upx;
			}
			.icon2{
				
			}
		}
	}
	.marign-t54{
		margin-top: 54upx;
	}
	.content{
		width: 750rpx;
		min-height: 100vh;
		display: flex;
		align-items: center;
		flex-direction: column;
		padding-top: 22rpx;
	}
</style>
